<template>
    <div class="f1" id="f1">
        <div class="head">
            <div class="left">
                <a href="`/`">
                    <img src="/img/icon/web-logo.png" alt="">
                </a>
            </div>
            <div class="right">
                <div class="nav">
                    <ul>
                        <li>
                            <router-link :to="`/`">首页</router-link>
                        </li>
                        <li>
                            <router-link :to="`/ireader`">分类</router-link>
                        </li>
                        <li>
                            <a href="javascript:;">排行</a>
                        </li>
                        <li>
                            <router-link :to="`/home`">机构服务</router-link>
                        </li>
                        <li>
                            <a href="javascript:;">征文大赛</a>
                            <img src="/img/icon/new.png" alt="">
                        </li>
                        <li>
                            <router-link :to="`/download`">下载</router-link>
                        </li>      
                    </ul>
                </div>
                <div class="search">
                    <form>
                        <input type="text" placeholder="书名/作者名" v-model="kw" @keyup.enter="search">
                        <s @click="search"></s>
                    </form>
                    <ul class="list" :style="{display:(kw==''?'none':'block')}" @click="toggle($event)">
                      <li v-for="(item,i) of lists" :key="i" :data-index="item.title">{{item.title}}</li>
                    </ul>
                </div>
                
                  <div class="login">
                  <!-- <div v-if="isLogin==false" class="login"> -->
                    <router-link :to="`/login`">
                        <button>登录</button>
                    </router-link>
                    
                </div>
                
            </div>    
        </div>
    </div>
</template>
<script>
import {mapState, mapMutations} from "vuex"
export default {
  data(){
    return {
      kw:'',
      lists:[],
      searchs:true
    }
  },
  methods: {
    search() {
     if(this.kw!=''){
      this.axios.get(`/search?kw=${this.kw}`).then(result=>{
        console.log(result.data);
        this.lists=result.data;
      })
      }
    },
    toggle(event){
      var title=event.target.dataset.index;
      console.log(title)
      this.$router.push(`/search?title=${title}`);
    }
  },
  mounted(){
  },
  watch:{
   kw(){
     if(this.searchs){
       this.searchs=false;
       this.search();
       setTimeout(()=>{
         this.searchs=true
       },500)
     }
   }
  },
  // computed:{
  //   ...mapState(["uname","isLogin"])
  // }


}
</script>
<style scoped>
/* 公共样式 */
a {
  text-decoration: none;
  color: #9e9e9e; }

ul {
  list-style: none; }

h3, i {
  font-style: normal;
  font-weight: normal;
  font-size: 12px; }

input, button {
  outline: none; }

.f1 {
  width: 100%;
  background-color: #fff; }
  .f1 .head {
    width: 1000px;
    height: 68px;
    line-height: 68px;
    margin: 0 auto; }
    .f1 .head .left {
      float: left;
      padding: 0 2px; }
      .f1 .head .left img {
        width: 160px;
        height: 32px;
        margin-top: 16px; }
    .f1 .head .right {
      float: right; }
      .f1 .head .right .nav {
        float: left; }
        .f1 .head .right .nav li {
          float: left;
          margin-left: 28px;
          font-size: 14px;
          position: relative; }
        .f1 .head .right .nav img {
          position: absolute;
          top: 15px;
          right: -15px;
          width: 23px;
          height: 12px; }
      .f1 .head .right .search {
        float: left;
        position: relative; }
        .f1 .head .right .search input {
          width: 210px;
          height: 30px;
          line-height: 28px;
          border: 1px solid #d2d2d2;
          border-radius: 50px;
          margin: 20px 22px 0 20px;
          padding: 0 36px 0 12px;
          font-size: 12px; }
        .f1 .head .right .search input:hover {
          border: 1px solid gray; }
        .f1 .head .right .search s {
          width: 15px;
          height: 15px;
          cursor: pointer;
          background-image: url(/img/icon/icon.png);
          background-position-x: initial;
          background-position-y: initial;
          position: absolute;
          right: 36px;
          top: 27px; }
        
        .f1 .head .right .search .list{
          position: absolute;
          right: 35px;
          top: 51px;
          overflow: hidden;
          background: #fff;
          border: 1px solid #f0f0f0;
          display: none;
          z-index: 101;
        }
        .f1 .head .right .search li{
          width: 180px;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          color: #9e9e9e;
          padding: 0 15px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          cursor: pointer;
        }
        .f1 .head .right .search li:hover{
          background-color: #f0f0f0;
        }
        .f1 .head .right .login {
          float: left; }
          .f1 .head .right .login button {
            width: 60px;
            height: 28px;
            border: 1px solid #d2d2d2;
            border-radius: 5px;
            cursor: pointer;
            background-color: #fff; }

</style>
